<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 800px;
            bottom: 0px;
            z-index: 99;

        }
    </style>
</head>

<body>

    <img src="./../img/b65a0598a0d8474dcc1dd391d2cf42ff.gif" alt="">

    <script src="../../JS基础/utils.js"></script>
    <script>

        let img = document.getElementsByTagName('img')[0];
        class Ball {
            constructor(r, bgColor, left, top) {
                this.r = r;
                this.bgColor = bgColor;
                this.left = left;
                this.top = top;
                this.node = null;
                this.render();
            }
            render() {

                let opacity = 1;
                this.node = document.createElement('div');
                let that = this;
                let timer = setInterval(function () {
                    opacity -= 0.01;
                    that.r++;
                    if (opacity < 0.3) {//消失
                        document.body.removeChild(that.node);//删除节点
                        clearInterval(timer)
                    } else {

                        that.node.style.cssText = `
                        width:${that.r * 2}px;
                        height:${that.r * 2}px;
                        background-color:${that.bgColor};
                        position:absolute;
                        left:${that.left}px;
                        top:${that.top}px;
                        border-radius: 50%;
                        opacity: ${opacity};
                        `
                    }
                }, 40)
                document.body.appendChild(this.node)
            }
        }
        img.onclick = function () {
            let r = createRandom(100);
            let color = `rgb(${createRandom(255)},${createRandom(255)},${createRandom(255)})`;
            let x = createRandom(innerWidth - 2 * r);
            let y = createRandom(innerHeight - 2 * r);
            new Ball(r, color, x, y);
        }



    </script>

</body>

</html>